<template>
  <div class="levy-wrapper">
    <div class="levyLogo">
      <img src="./imgs/levy01.jpg" alt="">
      <div class="levyLogoText">
        <p>OFO的小名叫小黄车，永安行小名是小绿，那么作为阜阳本土共享电动车品牌，<i class="sixColor">六个轮子小名儿叫啥呢？</i></p>
        <p>本月，阜阳团市委、阜阳市广播电视台、阜阳九银电子科技有限公司在全市范围内发起六个轮子小名儿征集活动</p>
        <p>让我们一起脑洞一下，咱们阜阳人自己的共享车叫啥吧！</p>
      </div>
      <div class="ruleOpen">
        <button class="openRule" @click="fadeRoles = true"></button>
      </div>
    </div>
    <div class="levyPhone">
      <img src="./imgs/levy02.jpg" alt="">
      <div class="levyPhoneForm" v-show="submitState">
        <input type="text" v-model="nickname" placeholder="请输入您取的小名儿(2-4个字符，可含数字、字母)" maxlength="20" >
        <input type="text" v-model="userName" placeholder="您的姓名" maxlength="20">
        <input type="text" v-model="phone" placeholder="联系电话(以此作为获奖依据，请务必正确填写)" maxlength="11">
        <input class="code" v-model="captchaCode" type="text" placeholder="验证码" maxlength="6">
        <button class="sendCode" @click="_sendCode()" :disabled="!show">
          <span v-show="show">获取验证码</span>
          <span v-show="!show" class="count">{{count}}s</span>
        </button>
        <button class="saveNickname" @click="_saveNickname()">提交</button>
        <span class="limit">每人仅限提交1次</span>
      </div>
    </div>
    <div class="levyAwards">
      <img src="./imgs/levy03.jpg" alt="">
      <div class="levyAwardsText" ref="levyAwardsText">
        <ul class="awardsList" style="top: 0px;" ref="awardsList">
          <li v-for="item in list">
            <i>{{item.userPhone}}</i>
            <i>{{item.userName}}</i>
            <i>{{item.nickname}}</i>
          </li>
          <li v-for="item in list">
            <i>{{item.userPhone}}</i>
            <i>{{item.userName}}</i>
            <i>{{item.nickname}}</i>
          </li>
          <li v-for="item in list">
            <i>{{item.userPhone}}</i>
            <i>{{item.userName}}</i>
            <i>{{item.nickname}}</i>
          </li>
          <li v-for="item in list">
            <i>{{item.userPhone}}</i>
            <i>{{item.userName}}</i>
            <i>{{item.nickname}}</i>
          </li>
          <li v-for="item in list">
            <i>{{item.userPhone}}</i>
            <i>{{item.userName}}</i>
            <i>{{item.nickname}}</i>
          </li>
        </ul>
      </div>
    </div>
    <div class="levyAwardRules">
      <img src="./imgs/levy04.jpg" alt="">
    </div>
    <div class="levy-btm" ref="levyBtm">
      <ul class="btmList" style="top: 0px;" ref="btmList">
      </ul>
    </div>
    <simplert ref="simplert"></simplert>
    <transition name="fade-in">
      <div class="fade_box" v-show="fadeRoles" :style="'height:' + this.boxbgHeight">
        <div class="fade_bg" @click="fadeRoles = false" :style="'height:' + this.boxbgHeight"></div>
        <div class="fade_out">
          <h2>活动规则</h2>
          <p>
            1、征名时间：11月6日~12日。<br/>
            2、命名规则：昵称2-4个字，与六个轮子相关，体现阜阳文明、文明共享出行、大气简洁、朗朗上口、积极向上的寓意。<br/>
            4、如有相同名称，我们以时间为序，以首创者为准。<br/>
            5、六个轮子品牌方将根据命名规则，优选66位入围者参与11月13日~19日投票环节。<br/>
            6、投票前6位名称交由市文明办、市宣传委、各行业青年精英等组成的专家评审团，综合阜阳文明出行、共享理念等多方面指标，最终评定出：1位最优采纳奖，5位大众喜爱人气奖。<br/>
            7、最终结果将于11月底正式公布。<br/>
            8、如有疑问，可联系六个轮子客服热线：<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0558-3688688。
          </p>
          <button class="closeRule" @click="fadeRoles = false">我知道了</button>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
  import Simplert from '../components/dialog/dialog.vue'
  export default {
    data() {
      return {
        nickname: '',
        userName: '',
        phone: '',
        captchaCode: '',
        list: {},
        show: true,
        count:'',
        img: require('../activities/styles/asset/share.jpg'),
        submitState:true,
        fadeRoles: false,
        boxbgHeight: ''
      }
    },
    mounted() {
      this._getShowList();
      this.$nextTick(() => {
        this._Carousel();
        this._setBoxHeight();
      });
      let root = process.env.MAIN_ROOT;
      this.$util.sendShareMessage("阜阳人的共享电动车——六个轮子，有奖征小名儿啦！","阜阳人的共享电动车——六个轮子，有奖征小名儿啦！", root+this.img);
      window.addEventListener('resize', () => {
        this._setBoxHeight();
      })
    },
    methods: {
      _setBoxHeight() {
        let height = window.innerHeight;
        this.boxbgHeight = height + 'px';
      },
      _Carousel() {
        let levyAwards = this.$refs.levyAwardsText;
        let awardsList = this.$refs.awardsList;
        this.nes(levyAwards, awardsList);
      },
      _saveNickname() {
        if (this.nickname === '') {
          this.open('请输入您取的名字',false,'','','fade_alert',function(){
          });
          return false;
        }
        let nickpat = /^[A-Za-z0-9\u4e00-\u9fa5]{1,20}$/;
        if (!nickpat.test(this.nickname)) {
          this.open('名称只能输入数字、字母和汉字',false,'','','fade_alert',function(){
          });
          return false;
        }
        if (this.userName === '') {
          this.open('请输入您的姓名',false,'','','fade_alert',function(){
          });
          return false;
        }
        if (!nickpat.test(this.userName)) {
          this.open('请输入正确的姓名',false,'','','fade_alert',function(){
          });
          return false;
        }
        if(this.phone === '') {
          this.open('请输入手机号码',false,'','','fade_alert',function(){
          });
          return false;
        }
        let phonepat = /^1\d{10}$/;
        if (!phonepat.test(this.phone)) {
          this.open('请输入有效的手机号码',false,'','','fade_alert',function(){});
          return false;
        }
        if(this.captchaCode === '') {
          this.open('请输入验证码',false,'','','fade_alert',function(){});
          return false;
        }
        let codepat = /^\d{6}$/;
        if (!codepat.test(this.captchaCode)) {
          this.open('请输入正确的验证码',false,'','','fade_alert',function(){});
          return false;
        }
        this.$api.post('/activityNickname/v1/saveNickname?nickname=' + this.nickname + '&userName=' + this.userName + '&phone=' + this.phone + '&captchaCode=' +this.captchaCode, {}, s=> {
          this.open('征名成功',false,'','','fade_success',() => {
          })
          setTimeout(()=>{
            window.location.reload();
          },1500);
        }, f=> {
          this.open(f.errorMessage,false,'','','fade_alert',function(){
          });
          setTimeout(()=>{
            window.location.reload();
          },1500);
        })
      },
      _sendCode() {
        if(this.phone === '') {
          this.open('请输入手机号码',false,'','','fade_alert',function(){
          });
          return false;
        }
        let pat = /^1\d{10}$/;
        if (!pat.test(this.phone)) {
          this.open('请输入有效的手机号码',false,'','','fade_alert',function(){});
          return false;
        }
        const time = 60;
        if (!this.timer) {
          this.timer = true;
          this.$api.post('/sendCode/v1/sendRegSms?phone='+this.phone,{},s=>{
            this.open('验证码发送成功',false,'','','fade_success',function(){

            });
            this.count = time;
            this.show = false;
            const countTime = setInterval(() => {
              if (this.count > 0 && this.count <= time) {
                this.count--;
              } else {
                this.show = true;
                clearInterval(countTime);
                this.timer = false;
              }
            }, 1000)
          },f=>{
            this.timer = false;
            this.open(f.errorMessage,false,'','','fade_alert',function(){

            });
            return;
          });
        }
      },
      _getShowList() {
        let _this = this;
        this.$api.post('/activityNickname/v1/getShowList', {}, s=> {
          return _this.list = s.module
        })
      },
      open (title, confirmBtn,customConfirmBtnText,onConfirm,type,onClose,message) {
        let obj = {
          title: title,
          useConfirmBtn: confirmBtn,
          customConfirmBtnText: customConfirmBtnText,
          onConfirm:onConfirm,
          type: type,
          onClose:onClose,
          message:message
        };
        this.$refs.simplert.openSimplert(obj);
      },
      nes(parent, list) {
        function b() {
          list.style.top = parseInt(list.style.top) - 1 + "px";
          if (parseInt(list.style.top) == -100) {
            list.style.top = 0;
          }
          if (parseInt(list.style.top) % 50 == 0) {
            clearInterval(time);
            var se = setTimeout(function () {
              time = setInterval(b, 30);
            }, 1);
          }
        };
        var time = setInterval(b, 30);
      }
    },
    components: {
      Simplert
    }
  }
</script>
<style>
  * {  margin:0;  padding:0;  box-sizing:border-box;;  }
  html{  overflow-y:auto;  font-size:62.5%;  }
  body {  color:#333;  font-size:1.4rem;  font-family: "arial","Open Sans","PingHei","Hiragino Sans GB","Microsoft YaHei","黑体","宋体",sans-serif;  background-color:#fff;  }
  a {  text-decoration:none;  color:#4e4e4e;  font-size:1.4rem;  font-family: "arial","Open Sans","PingHei","Hiragino Sans GB","Microsoft YaHei","黑体","宋体",sans-serif;  -webkit-font-smoothing: antialiased;  }
  textarea,input,select{font-family: "arial","Open Sans","PingHei","Hiragino Sans GB","Microsoft YaHei","黑体","宋体",sans-serif;}
  img {  border:0;  vertical-align:top;  }
  ol, ul, li {  list-style:none;  }
  dl, dt, dd, ul, li {  margin:0;  padding:0;  }
  input,textarea{outline: none;}
  html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
  body,html{ width: 100%; height: 100%;}
  .levy-wrapper {  text-align: center;  }
  .levyLogo, .levyPhone, .levyAwards, .levyAwardRules {  width: 100%;  position: relative;  }
  .levy-wrapper img {  width: 100%;  }
  .levyLogoText {  font-size: 0.28rem;  text-align: left;  line-height: 0.35rem;  position: absolute;  left: 0;  bottom: 3.5rem;  }
  .levyLogoText p {  padding: 0 0.499rem;  }
  .levyLogoText .sixColor {  font-style: normal;  color: #ff5d2e;  }
  @media screen and (max-width: 320px) {  .levyLogoText {  font-size: 12px;  text-align: left;  line-height: 18px;  position: absolute;  left: 0;  bottom: 125px;  }  .levyLogoText p {  padding: 0 20px;  }  }
  .levyPhoneForm {  width: 100%;  text-align: center;  position: absolute;  top: 3.3rem;  left: 0;  }
  .levyPhoneForm input {  float: left;  margin: 0.2rem 0 0 0.777rem;  width: 80%;  height: 0.8rem;  font-size: 12px;  text-indent:15px;  border-radius: 5px;  background: #e5e5e5;  border: none;  }
  .levyPhoneForm input:first-child{  margin-top: 1.6rem;  }
  @media screen and (max-width: 320px) {  .levyPhoneForm {  top: 190px;  }  .levyPhoneForm input:first-child{  margin-top: 15px;  }  .levyPhoneForm input {  margin: 10px 0 0 35px;  font-size: 10px;  text-indent:5px;  }  }
  .levyPhoneForm .code {  width: 45%;  }
  .sendCode {  float: left;  margin: 0.2rem 0 0 0.349rem;  width: 30%;  height: 0.8rem;  border: 1px solid #ff5d2e;  background: #ffffff;  color: #ff5d2e;  border-radius: 5px;  }
  .saveNickname {  float: left;  margin: 0.2rem 0 0 0.777rem;  width: 80%;  height: 0.8rem;  background: #ff5d2e;  border: none;  color: #ffffff;  font-size: 14px;  border-radius: 5px;  }
  @media screen and (max-width: 320px) {  .saveNickname {  margin: 10px 0 0 35px;  }  }
  .limit {  clear: both;  display: block;  width: 100%;  font-size: 14px;  line-height: 50px;  color: #999999;  }
  @media screen and (max-width: 320px) {  .limit {  font-size: 12px;  line-height: 25px;  }  }
  .levyAwardsText {  width: 100%;  height: 1.2rem;  position: absolute;  top: 1.18rem;  left: 0;  font-size: 14px;  color: #ffffff;  overflow: hidden;  }
  .levyAwardsText li {  height: 0.4rem;  line-height: 0.4rem;  text-align: left;  width: 70%;  margin: 0 auto;  white-space: nowrap;  }
  .levyAwardsText i {  display: inline-block;  font-style: normal;  }
  .levyAwardsText i:nth-child(1) {  padding: 0 0 0 0.4rem;  width: 40%;  }
  .levyAwardsText i:nth-child(2) {  width: 20%;  }
  .levyAwardsText i:nth-child(3) {  width: 35%;  }
  @media screen and (max-width: 320px) {  .levyAwardsText {  top: 45px;  }  .levyAwardsText i:nth-child(1) {  padding: 0 0 0 10px;  }  }
  .awardsList {  position: absolute;  width: 100%;  top: 1.18rem;  left: 0;  }
  .rule li {  padding: 0 20px;  margin-top: 5px;  font-weight: 600;  }
  .closeRule {  width: 100%;  height: 40px;  border: none;  margin-top: 20px;  background: #f2f2f2;  color: #ff5d2e;  font-size: 14px;  border-radius: 0 0 20px 20px;  }
  .ruleOpen {  width: 100%;  position: absolute;  top: 4.5rem;  left: 0;  }
  .openRule {  width: 100%;  height: 1.5rem;  border: none;  margin: 0;  padding: 0;  position: absolute;  top: 0;  left: 0;  background: none;  }
  .fade_box{  position: fixed; display: flex;  z-index: 999;  top: 0;  left: 0;  overflow: auto;  width: 100%;  align-items:center;  }
  .fade_bg{ background-color: rgba(0,0,0,0.7); position: absolute; width: 100%;}
  .fade_out{ background-color: #fff; border-radius: 0.4rem; width: 5.8rem; font-size: 14px; margin: 0 auto; padding-top: 0.5rem; max-height:90%; overflow-y: scroll;  animation-name: zoomIn;  animation-duration: .3s;  animation-fill-mode: both;  }
  .fade_out>h2{background: url("./imgs/levy05.png") no-repeat center; background-size: contain; text-align: center; color: #ff5d2e; font-size: 18px; margin: 0 0.7rem; margin-bottom: 0.2rem;}
  .fade_out p{ padding: 0 0.5rem; line-height: 0.45rem; text-align: left; font-size: 12px;}
  @keyframes zoomIn { from {  transform: scale3d(0.3, 0.3, 0.3);  opacity: 0;  } 50% {  opacity: 1;  } }
</style>
